/**
 * 个性推荐
 */

import React, { memo, useEffect } from 'react';
import  { useDispatch, useSelector, shallowEqual } from 'react-redux';
import { PageHeader,  Row, Col } from 'antd';
import { RightOutlined } from '@ant-design/icons';

import TopBanner from './components/TopBanner'
import PicList from '@/components/PicList'

import { getPersonalizedListAction } from './store/actionCreators'

function Recommendation() {

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getPersonalizedListAction(10))
  }, [dispatch]);

  const { personalizedList } = useSelector(state => ({
    personalizedList: state.getIn(["recommend", "personalizedList"])
  }), shallowEqual)

  return (
    <div className="recommendation base">
      <TopBanner />
      <div className="container">
        <PageHeader title="推荐歌单"
          subTitle={<RightOutlined />}>
        </PageHeader>
        <Row gutter={18}>
          { personalizedList && personalizedList.map((item, index) => {
            return (
              <Col key={item.id} span={5}>
                <PicList
                  isDrop={index === 0}
                  imageUrl={item.picUrl}
                  introductionText={item.name}
                  playCount={item.playCount}
                  isMiddle={true}
                  size={"small"}
                />
                </Col>
            )
          })
          }
          </Row>
      </div>
    </div>
  )
}

export default memo(Recommendation);
